<template>
  <div class="n-register">
    <van-nav-bar :title="header" fixed z-index="99" left-arrow @click-left="onClickLeft"/>
    <div class="n-register-field-box">
      <van-cell-group>
        <van-field
          v-model="data.name"
          maxlength="15"
          required
          clearable
          placeholder="请填写商户名称"
          label="商户名称"
          :error="errorInfo.name"
        />
        <van-field
          v-model="data.code"
          label="营业执照号"
          required
          clearable
          placeholder="请填写营业执照号"
          :error="errorInfo.code"
        />
        <van-field
          v-model="data.tel"
          label="注册地址"
          required
          clearable
          placeholder="请填写注册地址"
          :error="errorInfo.tel"
        />
        <van-field
          v-model="listQuery.area"
          label="所属区域"
          @click="area = true"
          readonly
          is-link
          required
          placeholder="请选择所属区域"
        />
        <van-field
          v-model="data.tel"
          label="法人姓名"
          required
          clearable
          placeholder="请填写法人姓名"
          :error="errorInfo.tel"
        />
        <van-field
          v-model="data.tel"
          label="法人身份证号"
          required
          clearable
          placeholder="请填写法人身份证号"
          :error="errorInfo.tel"
        />
        <van-field
          v-model="data.tel"
          label="结算账户名称"
          required
          clearable
          placeholder="请填写结算账户名称"
          :error="errorInfo.tel"
        />
        <!--<slot/>-->
        <van-field
          v-model="data.tel"
          label="结算账户名称"
          required
          clearable
          placeholder="请填写结算账户名称"
          :error="errorInfo.tel"
        />
        <van-field
          v-model="data.tel"
          label="结算账户号"
          required
          clearable
          placeholder="请填写结算账户号"
          :error="errorInfo.tel"
        />
        <van-field
          v-model="listQuery.accType"
          label="账户类型"
          @click="opAccType = true"
          readonly
          is-link
          required
          placeholder="请选择账户类型"
        />

        <!--<address-edit-detail-->
          <!--:focused="detailFocused"-->
          <!--:value="data.address_detail"-->
          <!--:error="errorInfo.address_detail"-->
          <!--:search-result="searchResult"-->
          <!--:show-search-result="showSearchResult"-->
          <!--@focus="onFocus('address_detail')"-->
          <!--@blur="detailFocused = false"-->
          <!--@input="onChangeDetail"-->
          <!--@select-search="$emit('select-search', $event)"-->
        <!--/>-->
        <!--<van-cell title="账户类型" @click="openAccType" is-link value="内容" />-->
        <van-field
          v-model="listQuery.bankvalue"
          label="开户行"
          @click="bank = true"
          readonly
          is-link
          required
          placeholder="请选择开户行"
        />
        <van-field
          v-model="listQuery.sbBankValue"
          label="开户支行"
          @click="sbBank = true"
          is-link
          readonly
          required
          placeholder="请选择开户支行"
        />
        <van-field
          v-model="data.khzf"
          label="开户支行名称"
          required
          placeholder="请输入开户支行名称"
          :error="errorInfo.khzf"
        />
        <van-field
          v-model="data.khzf"
          label="银行卡预留手机号"
          required
          placeholder="请输入银行卡预留手机号"
          :error="errorInfo.khzf"
        />
        <van-field
          v-model="data.khzf"
          label="联系人名称"
          required
          placeholder="请输入联系人名称"
          :error="errorInfo.khzf"
        />
        <van-field
          v-model="data.khzf"
          label="联系人手机号"
          required
          placeholder="请输入联系人手机号"
          :error="errorInfo.khzf"
        />
        <van-field
          v-model="data.khzf"
          label="联系人邮箱"
          required
          placeholder="请输入联系人邮箱"
          :error="errorInfo.khzf"
        />
        <van-field
          v-model="data.kftel"
          label="客服电话"
          required
          placeholder="请输入客服电话"
          :error="errorInfo.kftel"
        />
      </van-cell-group>
    </div>
    <div class="n-register-rules-box">
      <!--<van-checkbox class="n-register-van-checkbox" v-model="checked">我已阅读并同意 <a href="/">用户协议</a></van-checkbox>-->
      <van-button class="n-register-btn" size="large" @click="goRegister" :disabled="btnState">注册</van-button>
    </div>
    <!--地址选择-->
    <van-popup v-model="area" position="bottom">
      <van-area
        :area-list="areaList"
        @confirm="areaConfirm"
        @cancel="area = false"
      />
    </van-popup>
    <!--账户类型弹框-->
    <van-popup v-model="opAccType" position="bottom">
      <van-picker
        :columns="columns1"
        show-toolbar
        @confirm="opAccTypeConfirm"
        @cancel="opAccType = false"
      />
    </van-popup>
    <!--开户行弹框-->
    <van-popup v-model="bank" position="bottom">
      <van-picker
        :columns="columns2"
        show-toolbar
        @confirm="bankConfirm"
        @cancel="opAccType = false"
      />
    </van-popup>
    <!--开户支行弹框-->
    <van-popup v-model="sbBank" position="bottom">
      <van-picker
        :columns="columns3"
        show-toolbar
        @confirm="sbBankConfirm"
        @cancel="opAccType = false"
      />
    </van-popup>
  </div>
</template>

<script>
  /* eslint-disable camelcase */
  import areaList from '@/assets/area/area';
  import { Icon, Checkbox, Loading, Cell, CellGroup, Popup, Area, Button, Field, SwitchCell, NavBar, Actionsheet, Picker, Toast } from 'vant';

  export default {
    name: 'address-edit',
    components: {
      Icon,
      Loading,
      Button,
      SwitchCell,
      [Cell.name]: Cell,
      [Area.name]: Area,
      [Picker.name]: Picker,
      [Popup.name]: Popup,
      [Toast.name]: Toast,
      [Actionsheet.name]: Actionsheet,
      [CellGroup.name]: CellGroup,
      [Field.name]: Field,
      [NavBar.name]: NavBar,
      [Checkbox.name]: Checkbox,
      [Button.name]: Button
      // AddressEditDetail
    },
    data() {
      return {
        area: false,
        areaList: areaList,
        opAccType: false,
        bank: false,
        sbBank: false,
        header: '注册聚合支付用户',
        checked: false,
        btnState: false,
        cityShow: false,
        columns1: [
          { text: '公户', id: 1 },
          { text: '私户', id: 2 }
        ],
        columns2: [
          { text: '富民银行', id: 'bank_1' },
          { text: '工商银行', id: 'bank_2' },
          { text: '建设银行', id: 'bank_3' }
        ],
        columns3: [
          { text: '观音桥支行', id: 'sb_bk_1' },
          { text: '两江新区支行', id: 'sb_bk_2' }
        ],
        listQuery: {
          area: '',
          accType: '',
          sbBankValue: '',
          bankvalue: ''
        },
        name: '',
        tel: '',
        receiver: '123',
        telPlaceholder: 'cc',
        province: '',
        city: '',
        county: '',
        area_code: '',
        postal_code: '',
        address_detail: '',
        is_default: false,
        data: {},
        showArea: false,
        detailFocused: false,
        errorInfo: {
          tel: false,
          name: false,
          postal_code: false,
          address_detail: false
        }
      };
    },
    methods: {
      onClickLeft() {
        this.$router.push('state_no');
      },
      // 注册按钮
      goRegister() {
        this.$router.push('registered');
      },
      // 打开账户类型
      openAccType() {
        this.opAccType = true;
      },
      areaConfirm(value) {
        if (value) {
          let areaName = '';
          for (let i = 0, item = value.length; i < item; i++) {
            areaName += value[i].name + ' / ';
          }
          const newStr = areaName.lastIndexOf('\/');
          console.log(areaName);
          console.log(newStr);
          this.listQuery.area = areaName.substring(0, newStr);
          this.area = false;
        }
        console.log(value);
      },
      opAccTypeConfirm(value, index) {
        console.log(value);
        this.listQuery.accType = value.text;
        this.opAccType = false;
      },
      bankConfirm(value, index) {
        console.log(value.text);
        this.listQuery.bankvalue = value.text;
        this.bank = false;
      },
      sbBankConfirm(value, index) {
        this.listQuery.sbBankValue = value.text;
        this.sbBank = false;
      },
      onChange(picker, value, index) {
        Toast(`当前值：${value}, 当前索引：${index}`);
      }
    }
  };
</script>
<style lang="less" scoped>
  .n-register {
    .van-field {
      .van-cell__title {
        max-width: 2.4rem;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
    &-field-box {
      margin-top: 1.12rem;
      margin-bottom: 2rem;
      background-color: #f8f8f8;
    }
    &-rules-box {
      background-color: #fff;
      position: fixed;
      width: 100%;
      bottom: 0;
      left: 0;
      border-top: 1px solid #f8f8f8;
    }
    &-btn {
      width: 100%;
      background-color: #FD7D42;
      border: #FD7D42;
      color: #fff;
      border-radius: 0;
    }
    &-van-checkbox {
      font-size: 12px;
      color: #333;
      padding: .2rem .32rem;
      a {
        color: #2F66F3;
      }
      .van-checkbox__icon, .van-checkbox__label {
        line-height: .3rem;
      }
      .van-checkbox__label {
        margin-left: 7px;
      }
      .van-checkbox__icon .van-icon {
        width: .32rem;
        height: .32rem;
        font-size: 10px;
      }
      .van-checkbox__icon--checked .van-icon {
        border-color: #FF7328;
        background-color: #FF7328;
      }
    }
  }
</style>
